<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝贝胡珂的网站</title>
    <link rel="stylesheet"  href="ke1.css">
    <style>

li {
            /*float: left;*/
            width: 100px;
            height: 20px;
            margin: 2px;
            list-style:none;
            text-align: center;
            background: palegreen;
            display: inline-block;
        }
a{
            text-decoration: none;
        }
a:link,a:visited
        {
            display:block;
            font-weight:bold;
            color:#FFFFFF;
            background-color:#bebebe;
            text-align:center;
            text-transform:uppercase;
        }
a:hover,a:active
        {
            background-color:yellowgreen;
        }
h1 {
  color: white;
  text-align: center;
  margin: 2cm 4cm 3cm 4cm;
}

p {
  font-family: verdana;
  font-size: 20px;
  border: solid 1px blue;
  margin:0;
  text-shadow: 2px 2px red;
  clear:both;
}
#a{
    color:blueviolet;
}
.we{
    color:blanchedalmond;
    font-family: 'Times New Roman', Times, serif;
}
body{
  margin:0;
}
nav ul li{
  display:inline-block;
  margin:auto 10px;
  text-align: center;
}
div.col{
  display:inline-block;
}
div p{
        display:none;
    }
    div:hover p{
        display:block;
    }
    table-back,th{
      background-color:rgb(255, 0, 195) ;
      color:rgb(255, 145, 0);
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    table-back,td{
      background-color:aqua;
      color:white;
    }
    table, td, th {
  border: 5px solid black;
}
.table-back {
            border-collapse: collapse;
            width: 400px;
            height: 100px;
        }
table {
  width: 100%;
  border-collapse: collapse;
}
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  box-shadow: 10px 10px 10px; 
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.hk {
  padding: 15px;
  text-align: center;
}
footer{
	clear:both;
	display:block;
	background-color:#f08622;
	color:#FFFFFF;
	text-align:center;
	padding:15px;
}
    </style>
</head>
<body>
  <p align="center">胡珂驾到</p>
  <header>
    <nav style="backgroung-color:pink;">
      <ul align="center">
        <li><a href="index2.html">个人介绍</a></li>
        <li><a href="index1.html">事例介绍</a></li>
        <li><a href="index3.html">照片展示</a></li>
        <li><a href="https://baike.baidu.com/item/崔智秀/24131681">喜欢的偶像</a></li>
      </ul>
      </nav>
     
  </header>
  <nav>
  <main>
    <div> 
      here
   <p align="center">被你发现咯，我爱你！</p>
   </div>
  
  
  
    <h1>欢迎来到我宝贝的网页</h1>
    <a name="tips"><a href="index3.html">hh</a>
    <table>
      <tr>
        <th>胡珂</th>
        <th>周芯豪</th>
      </tr>
      <tr>
        <td>傻蛋</td>
        <td>小子</td>
      </tr>
      <tr>
        <td>老婆</td>
        <td>老公</td>
      </tr>
    </table>    
  
    <div class="gallery">
      <a target="_blank" href="789.JPG">
        <img src="789.JPG" alt="Cinque Terre" width="600" height="400">
      </a>
      <div class="hk">幼年胡珂</div>
    </div>
    <div class="gallery">
      <a target="_blank" href="987.JPG">
        <img src="987.JPG" alt="" width="600" height="400">
      </a>
      <div class="hk">幼年周芯豪</div>
    </div>
    <div  class="gallery">
      <a target="_black" href="1234.JPG">
        <img src="1234.JPG" width="600" height="400">
      </a>
      <div class="hk">青年胡珂</div>
    </div>
    <div class="gallery">
      <a target="_black"  href="467.JPG">
        <img src="467.JPG" width="600" hight="400">
      </a>
      <div class="hk">中年胡珂</div>
    </div>
    <body background="234.JPG"></body>
    <p>这是我老婆的照片.
       <img  width="50px" src="124.JPG">
    </p>
    <p>她可爱善良</p>
    <p id="a">超级无敌憨</p>
    <p class="we">也疯疯癫癫一惊一乍</p>
    <p>A心心心A       A心心心A</p>
    
  </nav>
</main>
<footer><a href="#tips">关于胡珂的一个网站</a></footer>
</body>

</html>